<script setup lang="ts">
  import Goods from './good/Index.vue'
  import GoodTypes from './good-type/Index.vue'
  import { nextTick, PropType, ref, watch } from 'vue'

  defineOptions({
    name: 'FeeStandardsGoodSettleCreate',
  })

  const props = defineProps({
    mode: {
      type: String as PropType<'good' | 'goodType'>,
      default: () => 'good',
    },
  })

  const goodsInstance = ref<InstanceType<typeof Goods> | null>(null)
  const goodTypesInstance = ref<InstanceType<typeof GoodTypes> | null>(null)

  watch(
    () => props.mode,
    () => {
      nextTick(() => {
        if (goodsInstance.value) {
          goodsInstance.value.clearList()
        }

        if (goodTypesInstance.value) {
          goodTypesInstance.value.clearList()
        }
      })
    },
  )

  defineExpose({
    getList: () => {
      if (props.mode === 'good' && goodsInstance.value) {
        return goodsInstance.value.getList()
      }

      if (props.mode === 'goodType' && goodTypesInstance.value) {
        return goodTypesInstance.value.getList()
      }
    },
    setList: (list: OrderGoodSettleDetail['programmeFeeVos']) => {
      if (props.mode === 'good' && goodsInstance.value) {
        goodsInstance.value.setList(list)
      }

      if (props.mode === 'goodType' && goodTypesInstance.value) {
        goodTypesInstance.value.setList(list)
      }
    },
    getRemoveFeeStandardIds: () => {
      if (props.mode === 'good' && goodsInstance.value) {
        return goodsInstance.value.getRemovedFeeStandardIds()
      }

      if (props.mode === 'goodType' && goodTypesInstance.value) {
        return goodTypesInstance.value.getRemovedFeeStandardIds()
      }
    },
    setNetworkPayPrice: (price: string) => {
      if (props.mode === 'good' && goodsInstance.value) {
        goodsInstance.value.setPayNetworkPrice(price)
      }

      if (props.mode === 'goodType' && goodTypesInstance.value) {
        goodTypesInstance.value.setPayNetworkPrice(price)
      }
    },
  })
</script>

<template>
  <div class="fee-standards-good-settle-create">
    <div class="title">标准费用列表</div>
    <div class="table">
      <goods v-if="props.mode === 'good'" ref="goodsInstance"></goods>
      <good-types v-else ref="goodTypesInstance"></good-types>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .fee-standards-good-settle-create {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: 100%;

    .title {
      font-size: 12px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .table {
      flex: 1;
      height: 0;
    }
  }
</style>
